@import 'src/style/modules';

/*
  Editable Name for Resource Cards
  ------------------------------------------------------------------------------
*/

$resource-name-font-size: 17px;
$resource-name-font-weight: 600;

.resource-name > a,
.input.resource-name--input > input {
  font-size: $resource-name-font-size;
  font-weight: $resource-name-font-weight;
  font-family: $ix-text-font;
}

.resource-name > a {
  display: inline-block;
  white-space: nowrap;
  line-height: $form-xs-height;
}

.resource-name {
  height: $form-xs-height;
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  margin-right: $ix-marg-a;
}

.input.resource-name--input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Ensure placeholder text matches font weight of title */
.input.resource-name--input > input {
  &::-webkit-input-placeholder {
    font-weight: $resource-name-font-weight !important;
  }
  &::-moz-placeholder {
    font-weight: $resource-name-font-weight !important;
  }
  &:-ms-input-placeholder {
    font-weight: $resource-name-font-weight !important;
  }
  &:-moz-placeholder {
    font-weight: $resource-name-font-weight !important;
  }
}

/* Edit button hover behavior */
.resource-name--toggle {
  font-size: $resource-name-font-size * 0.75;
  transform: translateY(-10%);
  padding: $ix-marg-a;
  display: inline-block;
  margin-left: $ix-marg-b;
  transition: color 0.25s ease, opacity 0.25s ease, width 0.25s ease;
  opacity: 0;
  width: 0;
  color: $g11-sidewalk;

  &:hover {
    cursor: pointer;
    color: $g15-platinum;
  }
}

.resource-name:hover,
.resource-name--editing {
  .resource-name--toggle {
    opacity: 1;
    width: $ix-marg-b + $ix-marg-c;
  }
}
